<template lang="html">
  <article id="views-charge">
    <div class="charge-content">
      <div class="content-head">
        <div class="des">
          <p>通过微信支付进行充值</p>
          <p>但前选择：<span class="payWay">微信零钱</span></p>
        </div>
      </div>
      <div class="content-input">
        <i class="icon-dollar"></i>
        <input type="number" placeholder="请输入充值金额"/>
        <button>充值</button>
      </div>
    </div>
  </article>
</template>

<script>
export default {
}
</script>

<style lang="scss" scoped>
@import "../css/config";
#views-charge{
  width: 100%;
  min-height: 100%;
  background-color: $common-bg;
  input{
    text-indent: 90px;
  }
  .charge-content{
    width: 100%;
    height: 460px;
    .content-head{
      background-color: #f2f1f7;
      padding: 45px 39px 0;
      height: 139px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .des>p{
          font-size: 24px;
          color: #000000;
      }
      .des>p:nth-child(2){
        line-height: 60px;
      }
      .payWay{
        color:#ff4808;
        font-weight: bolder;
      }
    }
    .content-input{
      position: relative;
      background-color:#e0dfe4 ;
      height: 185px;
      padding: 33px 40px 28px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      $icon-height: 45px;
      $input-height: 86px;
      .icon-dollar{
        position: absolute;
        top: 33px + $input-height/2;
        left: 60px;
        margin-top: $icon-height*-1/2;
        display: block;
        width: $icon-height;
        height: $icon-height;
        background: url('../assets/image/dollar.png') no-repeat;
        background-size: cover;
      }
      input{
        height: $input-height;
        width: 100%;
        font-size: 24px;
        border-radius: 32px;
        border: 2px solid #4a4a48;
      }
      button{
        color: white;
        height: 66px;
        width: 260px;
        font-size: 24px;
        background-color:#ff4907;
        border-radius: 32px;
        &:active{
          color: $active-font;
          background-color: $active-bg;
        }
      }
    }
  }
}
</style>
